<template>
  <div class="keyanPage">
    <div v-if="$route.name === 'ZCQxiangmusujujuList'">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>项目规划</el-breadcrumb-item>
          <el-breadcrumb-item>中长期项目库管理数据局</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="searchBox">
        <div class="left">
          <el-form
            :model="searchForm"
            label-width="100px"
            class="searchForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="项目名称"
                  prop="projectName"
                >
                  <el-input
                    v-model="searchForm.projectName"
                    placeholder="请输入项目名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="所属单位"
                  prop="capitalSource"
                >
                  <el-select
                    v-model="searchForm.capitalSource"
                    placeholder="请选择资金来源"
                  >
                    <el-option
                      label="民政局"
                      value="民政局"
                    ></el-option>
                    <el-option
                      label="公安局"
                      value="公安局"
                    ></el-option>
                    <el-option
                      label="财政局"
                      value="财政局"
                    ></el-option>
                    <el-option
                      label="国税局"
                      value="国税局"
                    ></el-option>
                    <el-option
                      label="土地局"
                      value="土地局"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="项目类型"
                  prop="capitalSource"
                >
                  <el-select
                    v-model="searchForm.capitalSource"
                    placeholder="请选择资金来源"
                  >
                    <el-option
                      label="草稿"
                      value="民政局"
                    ></el-option>
                    <el-option
                      label="已提交"
                      value="公安局"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="项目计划时间">
                  <el-date-picker
                    v-model="searchTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="right">
          <el-button-group>
            <el-button
              type="primary"
              @click="getList(1)"
            >查询</el-button>
            <el-button
              type="default"
              @click="resetSearchForm"
            >重置</el-button>
          </el-button-group>
        </div>
      </div>
      <div class="listBox">
        <el-button
          type="primary"
          @click="$router.push('/home/tongchou/ZCQxiangmuAdd')"
        ><i class="el-icon-plus"></i>新增</el-button>
        <el-table
          :data="list"
          style="width: 100%"
          height="500"
          class="mt20"
          @sort-change="onSortChange"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column
            label="项目名称"
            align="center"
            prop="projectName"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="项目编号"
            prop="projectNo"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="projectBudget"
            label="项目类型"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="capitalSource"
            label="所属行业"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="submitTime"
            label="所属单位"
          >
          </el-table-column>
          <el-table-column
            align="center"
            sortable="custom"
            prop="investment"
            label="项目总投资"
          >
            <template slot-scope="scope">
              {{getStateStr(scope.row.currentState)}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="toView(scope.row)"
              >查看</el-link>
              <template v-if="scope.row.currentState == 1">
                <el-divider direction="vertical"></el-divider>
                <el-link type="primary">编辑</el-link>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view
      @success="getList"
      v-else
    ></router-view>
  </div>
</template>

<script>
export default {
  name: 'keyan',
  components: {},
  data () {
    return {
      pageSize: 10,
      page: 1,
      total: 0,
      list: [],
      searchForm: {
        projectName: '',
        capitalSource: '',
        currentState: '',
        projectCategoryName: '',
        orderFlag: ''
      },
      searchTime: []
    }
  },
  computed: {
    stateOptions () {
      return [{
        label: '',
        options: [{
          label: '草稿',
          value: 1
        }, {
          label: '已提交',
          value: 2
        }, {
          label: '可研通过',
          value: 99
        }]
      }, {
        label: '可研1000W以下',
        options: [{
          label: '规划处确认',
          value: 10
        }, {
          label: '规划处预审',
          value: 11
        }, {
          label: '规划处联合评审',
          value: 12
        }, {
          label: '批复',
          value: 13
        }]
      }, {
        label: '可研1000W以上',
        options: [{
          label: '规划处确认',
          value: 20
        }, {
          label: '规划处预审',
          value: 21
        }, {
          label: '规划处联合评审',
          value: 22
        }, {
          label: '初审',
          value: 23
        }, {
          label: '市长审定',
          value: 24
        }, {
          label: '批复',
          value: 25
        }]
      }]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    toView (item) {
      let viewUrl = '/home/shenpi/keyan/view?id=' + item.processId
      if (item.processInstanceIdCs) {
        viewUrl += '&pid=' + item.processInstanceIdCs
      }
      this.$router.push(viewUrl)
    },
    getStateStr (state) {
      let stateStr = ''
      if (state === 1) {
        stateStr = '草稿'
      } else if (state === 2) {
        stateStr = '已提交'
      } else if (state === 10) {
        stateStr = '规划处确认'
      } else if (state === 11) {
        stateStr = '规划处预审'
      } else if (state === 12) {
        stateStr = '规划处联合评审'
      } else if (state === 13) {
        stateStr = '批复'
      } else if (state === 20) {
        stateStr = '规划处确认'
      } else if (state === 21) {
        stateStr = '规划处预审'
      } else if (state === 22) {
        stateStr = '规划处联合评审'
      } else if (state === 23) {
        stateStr = '初审'
      } else if (state === 24) {
        stateStr = '市长审定'
      } else if (state === 25) {
        stateStr = '批复'
      } else if (state === 99) {
        stateStr = '可研通过'
      }
      return stateStr
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getList()
    },
    handleCurrentChange (value) {
      this.getList(value)
    },
    getList (page) {
      if (page) {
        this.page = page
      }
      let params = Object.assign({}, {
        type: 1,
        pageNumber: this.page,
        pageSize: this.pageSize
      }, this.searchForm)
      if (this.searchTime.length > 0) {
        params['planBeginTime'] = this.searchTime[0]
        params['planEndTime'] = this.searchTime[1]
      }
      this.axios.get('/projectProcess/getList', {
        params
      }).then(res => {
        if (res.code !== 1000) {
          this.$message.error(res.message)
          return
        }
        this.list = res.data.records
        this.total = res.data.total
      })
    },
    resetSearchForm () {
      this.searchForm = {
        projectName: '',
        capitalSource: '',
        currentState: '',
        projectCategoryName: ''
      }
      this.searchTime = []
    },
    onSortChange (target) {
      const { order, prop } = target
      if (prop === 'projectBudget') {
        if (order === 'ascending') {
          this.searchForm.orderFlag = 1
        } else if (order === 'descending') {
          this.searchForm.orderFlag = 2
        } else {
          this.searchForm.orderFlag = ''
        }
      }
      this.page = 1
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.keyanPage {
  .searchBox {
    display: flex;
    margin-top: 20px;
    .left {
      flex: 1;
      background: #fff;
      padding: 20px 20px 0;
    }
    .right {
      width: 158px;
      background: #edf0fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .listBox {
    background: #fff;
    margin-top: 20px;
    padding: 20px;
    .pageBox {
      padding-top: 20px;
      text-align: right;
    }
  }
}
</style>
